<template>
  <div class="check">
    <div class="row-check flexbox flex-align-center">
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal == ''"
        src="https://cd.sealmg.com/assets/img/form-check-default-icon.png"
        alt="Password validation default status icon"
        title="Password validation not started"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && !checkLength"
        src="https://cd.sealmg.com/assets/img/form-check-error-icon.png"
        alt="Password length validation failed icon"
        title="Password length must be between 8-16 characters"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && checkLength"
        src="https://cd.sealmg.com/assets/img/form-check-success-icon.png"
        alt="Password length validation success icon"
        title="Password length requirement met"
        srcset=""
      />
      <span :class="['check-text', targetVal ? (checkLength ? 'check-success' : 'check-error') : '']">{{ $t('formRule.pwd816') }}</span>
    </div>
    <div class="row-check flexbox flex-align-center">
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal == ''"
        src="https://cd.sealmg.com/assets/img/form-check-default-icon.png"
        alt="Password combination default status icon"
        title="Password combination check not started"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && !checkRule1"
        src="https://cd.sealmg.com/assets/img/form-check-error-icon.png"
        alt="Password combination validation failed icon"
        title="Password must contain both letters and numbers"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && checkRule1"
        src="https://cd.sealmg.com/assets/img/form-check-success-icon.png"
        alt="Password combination validation success icon"
        title="Password combination requirement met"
        srcset=""
      />
      <span :class="['check-text', targetVal ? (checkRule1 ? 'check-success' : 'check-error') : '']">{{ $t('formRule.pwdCombin') }}</span>
    </div>
    <div class="row-check flexbox flex-align-center">
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal == ''"
        src="https://cd.sealmg.com/assets/img/form-check-default-icon.png"
        alt="Special characters check default status icon"
        title="Special characters check not started"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && !checkRule2"
        src="https://cd.sealmg.com/assets/img/form-check-error-icon.png"
        alt="Special characters validation failed icon"
        title="Password must not contain special characters"
        srcset=""
      />
      <img
        class="check-icon"
        loading="lazy"
        v-if="targetVal && checkRule2"
        src="https://cd.sealmg.com/assets/img/form-check-success-icon.png"
        alt="Special characters validation success icon"
        title="No special characters requirement met"
        srcset=""
      />
      <span :class="['check-text', targetVal ? (checkRule2 ? 'check-success' : 'check-error') : '']">{{ $t('formRule.pwdNospec') }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      targetVal: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    // watch: {
    //   'val':{
    //     handler (newVal) {
    //       this.targetVal=newVal
    //     },
    //     deep:true,
    //     immated:true
    //   }
    // },
    computed: {
      checkLength() {
        return this.targetVal.length >= 8 && this.targetVal.length <= 20
      },
      checkRule1() {
        const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/
        return regex.test(this.targetVal)
      },
      checkRule2() {
        const regex = /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g
        return !regex.test(this.targetVal)
      },
      checkRes() {
        return this.checkLength && this.checkRule1 && this.checkRule2
      }
    },
    created() {},
    methods: {}
  }
</script>
<style lang="less" scoped>
  .row-check {
    margin-top: 6px;
    padding-left: 4px;
    .check-icon {
      width: 12px;
      height: 12px;
    }
    .check-text {
      margin-left: 2px;
      font-size: 12px;
      color: @font-color-99;
    }
    .check-error {
      color: #ff4d4f;
    }
    .check-success {
      color: #52c41a;
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
  }
  @media screen and (max-width: 767px) {
  }
</style>
